<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            td{
                width: 50px;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div id="app" >
            <table>
                <tr v-for="(user,index) in users">
                    <td>{{index}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.gender}}</td>
                    <td>{{user.age}}</td>
                </tr>
            </table><br>


                <span v-for="(v,k,i) in person">
                  {{i}}-{{k}}-{{v}}
                </span><br>

            <!--1到10-->
            <span v-for="i in 10">
                {{i}},
            </span>

        </div>
        <!--导包一定要双标签，不能单标签-->
        <script src="./node_modules/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vue = new Vue({
                el:"#app",
                data:{
                    users:[
                        {name:'柳岩', gender:'女', age: 21},
                        {name:'有哥', gender:'男', age: 30},
                        {name:'范冰冰', gender:'女', age: 24},
                        {name:'刘亦菲', gender:'女', age: 18},
                        {name:'古力娜扎', gender:'女', age: 25}
                    ],
                    person: {name:'古力娜扎', gender:'女', age: 25}
                }
            })
        </script>
    </body>
</html>